<template>
	<view class="service">
		<view class="search-header">
			<Search class="search" @confirm="onSearch"></Search>
		</view>
		<scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
			<view v-for="(item,index) in serviceList" :key="item.id">
				<ServiceItem :options="item" @click="goDetail(item)"></ServiceItem>
			</view>
			<view class="loading-more" v-if="serviceList.length > 4">
				<text class="loading-more-text">加载更多...</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Search from '../../components/search.vue';
	import ServiceItem from '../../components/service-item.vue'
	export default {
		components: {
			Search,
			ServiceItem
		},
		data() {
			return {
				searchValue: "",
				serviceList: [],
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				let list = [];
				for (let i = 1; i <= 10; i++) {
					let item = {
						id: i,
						serviceIcon: "url",
						userIcon: "url",
						userName: "王何伟",
						userJob: "策划专员",
						company: "成都壹贰叁文化有限公司成都壹贰叁文化有限公司",
						score: 4.5,
						tipsList: [
							"PPT", "商业计划书", "小程序开发"
						],
						content: "本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃"
					}
					list.push(item);
				}
				this.serviceList = this.serviceList.concat(list);
				this.$forceUpdate()
			},
			loadMore(e) {
				setTimeout(() => {
					this.getList();
				}, 500)
			},
			onSearch(e){
				console.log("搜索结果："+e.value)
			},
			goDetail(e){
				uni.navigateTo({
					url: './userCard?id=' + e.id
				});
			}
		}
	}
</script>

<style>
	page{
		height: calc(100% - 116rpx);
	}
	.service{
		height: 100%
	}
	.search-header {
		margin: 0;
		width: 100%;
		height: 116rpx;
		box-shadow: 0px 4rpx 6rpx rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 1;
		background-color: #FFFFFF;
	}

	.scroll-v {
		margin: 116rpx 32rpx 0 32rpx;
		height: 100%;
		width: auto;
	}

	.search {
		width: 602rpx;
		margin: 0;
		flex: initial;
	}
</style>
